<!--
 * @Descripttion: 
 * @Author: yizheng.yuan
 * @Date: 2021-05-23 12:13:30
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-05-23 12:34:39
-->

<html>
  <head>
    <title>css-定位的学习</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    
    <div style="height: 2000px;">
      <div style="border: 1px solid red; margin-top: 100px;">
        <p style="position: relative; top: 20px; left: 50px;">1.相对定位 relative： 相对自己的定位</p>
        
      </div>
  
      <div style="border: 1px solid blue; margin-top: 100px; position: relative; width: 500px; height: 200px;">
  
        <div style=" position: relative; border: 1px solid black; margin-top: 20px; width: 300px; height: 100px;">
          <p style="position: absolute; top: 50px; left: 100px;">1.绝对定位 absolute</p>
        </div>
  
      </div>
  
      <div style="height: 60px; line-height: 60px; position: fixed; top: 0; left: 0; width: 100%; background-color: #ccc; ">
        3.固定定位：fixed: 相对于body的定位
      </div>
    </div>

    

  </body>
</html>